<template>
  <div>
    <el-row class="samples-info-box">
      <el-col :span="15">
        <el-row :gutter="10">
          <el-collapse-transition>
            <el-col ref="moreSearch" :lg="17" class="samples-searchBar-wrapper" :class="{'samples-show-more':ismore}">
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchList.conditions"
                  size="small"
                  class="samples-search-input"
                  clearable
                  placeholder="分析条件"
                  style="width:100%"
                >
                  <el-option v-for="item in conditionList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-col>
              <el-col :lg="8" :xl="6">
                <div @click="signUnit()">
                  <el-input
                    size="small"
                    type="text"
                    placeholder="签约单位"
                    clearable
                    class="samples-search-input pointer-event"
                  >
                    <div v-if="searchList.partyName" slot="prefix" class="dialog-select">{{ searchList.partyName }}</div>
                  </el-input>
                </div>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchList.part"
                  size="small"
                  class="samples-search-input"
                  clearable
                  placeholder="签约条件"
                  style="width:100%"
                >
                  <el-option v-for="item in partList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchList.classifyName"
                  size="small"
                  class="samples-search-input"
                  clearable
                  placeholder="合同分类"
                  style="width:100%"
                  @change="classifyNameChange"
                >
                  <el-option v-for="item in contractClassify" :key="item.code" :label="item.name" :value="item.name" />
                </el-select>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchList.typeName"
                  size="small"
                  class="samples-search-input"
                  clearable
                  placeholder="合同类型"
                  style="width:100%"
                >
                  <el-option v-for="item in searchContractType" :key="item.code" :label="item.name" :value="item.name" />
                </el-select>
              </el-col>
              <el-col :lg="16" :xl="12">
                <el-date-picker
                  v-model="timeArr"
                  size="small"
                  style="width:100%"
                  value-format="yyyyMMdd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-col>
            </el-col>
          </el-collapse-transition>
          <el-col :lg="7">
            <el-button size="small" type="primary" plain class="samples-search-btn" @click="getListBtn()">
              <i class="el-icon-search" />
            </el-button>
            <el-button size="small" type="text" class="samples-search-btn samples-ismore-button" @click="moreClick">
              MORE
              <i class="samples-search-icon" :class="[ismore?'el-icon-arrow-up':'el-icon-arrow-down']" />
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <!-- 右半边按钮区域 -->
      <el-col :span="9" class="samples-text-right">
        <el-button size="small" type="success" :loading="loading" @click="exportExcel()">导 出</el-button>
      </el-col>
    </el-row>
    <myEcharts :pie-chart="pieChart" />
    <my-table :data-objects="dataObjects" @giveQuery="getQuery" />
    <!-- 这里是穿梭框的dialog -->
    <dialog-select :sign-dialog="signDialog" :init-search-name="initSearchName" @childSelect-say="handleClose" @searchName="searchNameList" />
  </div>
</template>

<script>
import dialogSelect from './components/dialogSelect'
import myTable from './components/table'
import myEcharts from './components/Echarts'
import * as contractCorrelationApi from '@/api/contractManage/contractCorrelation'
export default {
  components: {
    myTable,
    dialogSelect,
    myEcharts
  },

  data() {
    return {
      // 导出数据的id
      // listQuerIed: '',
      // 加载框
      loading: false,
      initSearchName: [],
      dataObjects: {},
      pieChart: {},
      // 签约单位
      signDialog: false,
      ismore: false,
      searchList2: {},
      searchList: {
        page: 1,
        pageSize: 10,
        conditions: '',
        classifyName: '',
        typeName: '',
        partyName: '',
        // partyAName: '',
        party: '',
        // partyBName: '',
        time: ''
      },
      timeArr: [],
      // 这里是字典相
      conditionList: [
        { value: 'amount', label: '合同金额最高' }
        // { value: '1', label: '商品金额最高' },
        // { value: '2', label: '商品数量最高' }
      ],
      partList: [
        { value: 0, label: '全部' },
        { value: 'partyAName', label: '甲方' },
        { value: 'partyBName', label: '乙方' }
      ],
      contractClassify: [],
      projectContractType: [],
      singleContractType: [],
      searchContractType: []
    }
  },

  computed: {},

  mounted() {
    if (this.$route.query.isTag != true) {
    }
  },
  created() {
    if (this.$route.query.isTag != false) {
      this.getList()
    }
    this.getDict()
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == '/contractManage/contractMag/detail') {
      to.meta.title = to.params.tagsName
    }
    next()
  },
  methods: {
    moreClick() {
      this.ismore = !this.ismore
      const ref = this.$refs.moreSearch.$el
      if (this.ismore) {
        ref.style.height = ref.scrollHeight + 'px'
      } else {
        ref.style.height = '32px'
      }
    },
    // 改变时间时触发
    // changeTimeArr() {
    //   if (!this.timeArr) {
    //     this.timeArr = []
    //   }
    //   if (this.timeArr.length > 0) {
    //     this.searchList.time = this.timeArr[0] + '-' + this.timeArr[1]
    //   } else {
    //     this.searchList.time = ''
    //   }
    // },
    // 获取字典项
    getDict() {
      contractCorrelationApi.dictionary('contract_classify').then(res => {
        console.log(res.data)
        if (res.code === 1) {
          this.contractClassify = res.data
        }
      })
      contractCorrelationApi.dictionary('project_contract_type').then(res => {
        console.log(res.data)
        if (res.code === 1) {
          this.projectContractType = res.data
        }
      })
      contractCorrelationApi.dictionary('single_contract_type').then(res => {
        console.log(res.data)
        if (res.code === 1) {
          this.singleContractType = res.data
        }
      })
    },
    getQuery(val) {
      this.searchList.page = val.page
      this.searchList.pageSize = val.pageSize
      this.getList()
    },
    getListBtn() {
      this.searchList.page = 1
      this.getList()
    },
    getList() {
      if (!this.timeArr) {
        this.timeArr = []
      }
      if (this.timeArr.length > 0) {
        this.searchList.time = this.timeArr[0] + '-' + this.timeArr[1]
      } else {
        this.searchList.time = ''
      }
      this.getPie()
      contractCorrelationApi.contractAnalysisContractPage(this.searchList).then(res => {
        if (res.code === 1) {
          this.searchList2 = this.searchList
          this.dataObjects = res.data
        } else {
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    getPie() {
      const obj = Object.assign({}, obj, this.searchList)
      obj.page = null
      obj.pageSize = null
      contractCorrelationApi.contractAnalysisContractExport(obj).then(res => {
        if (res.code === 1) {
          this.pieChart = res.data[0]
        } else {
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    // 搜索发生改变
    classifyNameChange() {
      this.searchList.typeName = ''
      if (this.searchList.classifyName == '单项合同') {
        this.searchContractType = this.singleContractType
      } else if (this.searchList.classifyName == '项目合同') {
        this.searchContractType = this.projectContractType
      } else {
        this.searchContractType = []
      }
    },
    toFormater(num) {
      const res = num.toString().replace(/\d+/, function(n) { // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
          return $1 + ','
        })
      })
      return res
    },
    // 获取列表
    exportExcel() {
      this.loading = true
      const request = Object.assign({}, request, this.searchList2)
      request.page = ''
      request.pageSize = ''
      request.conditions = 'amount'
      contractCorrelationApi.contractAnalysisContractExport(request).then(res => {
        if (res.code == 1) {
          if (res.data[0].list.length == 0) {
            this.loading = false
            this.$notify({
              title: '提示',
              type: 'warning',
              message: '无列表数据',
              duration: '3000'
            })
            return
          }
          const resImport = res
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['合同编号', '合同名称', '甲方单位', '乙方单位', '业务单元', '所属项目', '合同分类', '合同类型', '合同金额', '签订日期', '合同内容', '状态', '创建人']
            // const tHeader = ['合同编号', '合同名称']
            const data = []

            resImport.data[0].list.forEach(item => {
              item.amount = (Number(item.amount).toFixed(2) + '').replace(
                /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
                '$&,'
              )
              data.push([item.code || '', item.name || '', item.partyAName || '', item.partyBName || '', item.businessUnitName || '', item.projectName === 'null' ? '' : item.projectName,
                item.classifyName || '', item.typeName || '', item.amount, item.signedTime || '', item.content || '', item.statusName || '', item.createUserName || ''])
            })
            // const data = [['sssss撒士大夫胜多负少', 2]]
            excel.export_json_to_excel({
              header: tHeader, // 表头 必填
              data, // 具体数据 必填
              filename: '合同统计分析表', // 非必填
              autoWidth: true, // 非必填
              bookType: 'xlsx', // 非必填
              sheetJsName: '合同统计分析表',
              title: '合同统计分析表'
            })
            this.loading = false
          })
        } else {
          this.loading = false
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    searchNameList(lists) {
      this.initSearchName = lists
      this.searchList.partyName = lists.join(',')
    },
    signUnit() {
      this.signDialog = true
    },
    handleClose() {
      this.signDialog = false
    }
  }
}
</script>
<style lang='scss' scoped>
.sys_client{
  .el-form-item{
        margin-bottom: 5px;
  }
  .el-form-item__label{
    font-weight: bold;
        margin-top: 5px;
  }
  .el-transfer{
    .el-transfer-panel__list{

      height: 320px !important;
    }
       .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{
              color: #606266 !important;
              font-size: 14px;
        }
    .el-transfer-panel__body{
      height: 100%;
    }
    .el-transfer-panel__list.is-filterable{
      height: 100%;
    }
        height: 440px;
         .el-transfer-panel{
    height: 420px;
        width: 350px;
        .el-input__prefix{
          left: auto;
    right: 10px;
        }

  }
    .el-transfer__buttons{
        padding: 0 4px;
        .is-disabled{
              background-color: #fff !important;
        }

  }
  .el-transfer__button{
         border-radius: 6px;
            padding: 8px;
  }

  .el-transfer__button:nth-child(2){
        margin: 0 10px 10px 10px !important;
  }
  }

}
</style>
